<template>
    <div class="time">
      <div class="month" @click="datahang" :class="isCollapse === true? 'lc':''">月份</div>
      <div class="data" :class="isCollapse === true? '':'lc'"  @click="datahang">日期</div>
                <div class="block">
                  <el-date-picker
                 v-if="isCollapse"
                  v-model="value2"
                  type="data"
                  placeholder="2022-10"
                  />
                  <div class="demo-data-picker" v-else>
                  <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="2015-10-02"
                  end-placeholder="2015-10-10"
                  :size="size"
                />
                </div>
               </div>
               <el-button type="primary" class="answer">查询</el-button>
     </div>
     <div class="list">
      <el-table :data="datalist7" border style="width: 100%">
    <el-table-column prop="numberOfReleases" label="发布数量" width="250" />
    <el-table-column prop="function" label="功能" width="400" />
    <el-table-column prop="proportion" label="占比" />
  </el-table>

     
     </div>
  </template>
  
  <script setup>
import { backtopEmits } from "element-plus"

  var isCollapse = ref(false)
  var datahang =()=>{
    isCollapse.value = !isCollapse.value
   
  }
    //a,导入接口
    import server from '@/api/index'
  var datalist7 = ref()
  
  import { onMounted, ref } from 'vue'; 
 //消息发布列表
 onMounted(async()=>{
  var res7 =  await server.xiaoxitongji.messageStatisticss_msgnum()
  datalist7.value = res7.data.data 
  console.log(res7);
 })


 

  
  </script>
  
  <style scoped>
  .time{
    display: flex;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
  }
  .time .block{
    margin-right: 20px;
  }
  .time .month{
    width: 80px;
    height: 30px;
    border: 1px solid #a6a2a2;
    border-radius: 5px;
  }
   .time .data{
    width: 80px;
    height: 30px;
    border: 1px solid #a6a2a2;
    border-radius: 5px;
    }
    .time .block{
      margin-left: 15px;
    }
    .time .answer{
      color: white;
  
    }
    .active{
      background-color: red;
    }
 
   .lc{
    background-color: #239ffe;
    color: white;
   }
  
  </style>